<template>
  <a-modal
    :visible="visible"
    title="aaa"
    cancelText="取消"
    okText="提交"
    width="1200px"
    @ok="submit"
    @cancel="cancel"
  >
    <div class="app-container">

      <h3>组卷信息</h3>
      <a-card style="margin-top: 20px">

        <div style="float: right; font-weight: bold; color: #ff0000">试卷总分：{{ postForm.totalScore }}分</div>

        <div>
          <a-button class="filter-item" size="small" type="primary" @click="handleAdd">
            添加题库
          </a-button>

          <a-table bordered :data-source="dataSource" :columns="columns">
            <template #bodyCell="{ column, text, record }">
              <template v-if="column.dataIndex === 'name'">
                <div class="editable-cell">
                  <div v-if="editableData[record.key]" class="editable-cell-input-wrapper">
                    <a-input v-model:value="editableData[record.key].name" @pressEnter="save(record.key)" />
                    <check-outlined class="editable-cell-icon-check" @click="save(record.key)" />
                  </div>
                  <div v-else class="editable-cell-text-wrapper">
                    {{ text || ' ' }}
                    <edit-outlined class="editable-cell-icon" @click="edit(record.key)" />
                  </div>
                </div>
              </template>
              <template v-else-if="column.dataIndex === 'operation'">
                <a-popconfirm
                  v-if="dataSource.length"
                  title="Sure to delete?"
                  @confirm="onDelete(record.key)"
                >
                  <a>Delete</a>
                </a-popconfirm>
              </template>
            </template>
          </a-table>
        </div>

      </a-card>

      <h3>考试配置</h3>
      <a-card style="margin-top: 20px">

        <a-form ref="postForm" :model="postForm" :rules="rules" label-position="left" laba-width="120px">

          <a-form-item label="考试名称" name="title">
            <a-input v-model="postForm.title"/>
          </a-form-item>

          <a-form-item label="考试描述" name="content">
            <a-input v-model="postForm.content" type="textarea"/>
          </a-form-item>

          <a-form-item label="总分数" name="totalScore">
            <a-input-number :value="postForm.totalScore" disabled/>
          </a-form-item>

          <a-form-item label="及格分" name="qualifyScore">
            <a-input-number v-model="postForm.qualifyScore" :max="postForm.totalScore"/>
          </a-form-item>

          <a-form-item label="考试时长(分钟)" name="totalTime">
            <a-input-number v-model="postForm.totalTime"/>
          </a-form-item>

          <a-form-item label="是否限时">
            <a-checkbox v-model="postForm.timeLimit"/>
          </a-form-item>

          <a-form-item v-if="postForm.timeLimit" label="考试时间" name="totalTime">

            <a-date-picker
              v-model="dateValues"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />

          </a-form-item>

        </a-form>

      </a-card>

      <h3>权限配置</h3>
      <a-card style="margin-top: 20px;">

        <a-radio-group v-model="postForm.openType" style="margin-bottom: 20px">
          <a-radio :label="1" border>完全公开</a-radio>
          <a-radio :label="2" border>部门开放</a-radio>
        </a-radio-group>

        <a-alert
          v-if="postForm.openType===1"
          title="开放的，任何人都可以进行考试！"
          type="warning"
        />

        <div v-if="postForm.openType===2">
          <a-input
            v-model="filterText"
            placeholder="输入关键字进行过滤"
          />

          <a-tree

            ref="tree"
            v-loading="treeLoading"
            empty-text=" "
            :data="treeData"
            default-expand-all
            show-checkbox
            node-key="id"
            :default-checked-keys="postForm.departIds"
            :props="defaultProps"
            :filter-node-method="filterNode"
            @check-change="handleCheckChange"
          />

        </div>

      </a-card>

      <div style="margin-top: 20px">
        <a-button type="primary" @click="handleSave">保存</a-button>
      </div>

    </div>
  </a-modal>

</template>
<script>
import { computed, defineComponent, reactive, ref } from 'vue';
import { CheckOutlined, EditOutlined } from '@ant-design/icons-vue';
import { cloneDeep } from 'lodash-es';
export default defineComponent({
  components: {
    CheckOutlined,
    EditOutlined,
  },
  props: {
    visible: {
      type: Boolean,
    },
    record: {
      type: Object,
    }
  },
  emit: ["close"],
  setup(props, context) {

    let step = 1;
    let treeData = [];

    let defaultProps = {
      label: 'deptName'
    };
    let levels = [
      {value: 0, label: '不限'},
      {value: 1, label: '普通'},
      {value: 2, label: '较难'}
    ];
    let filterText = '';
    let treeLoading = false;
    let dateValues = [];
    let quDialogShow = false;
    let quDialogType = 1;
    let excludes = [];

    let scoreDialog = false;
    let scoreBatch = 0;

    // 题库
    let repoList = [{ rowId: new Date().getTime(), radioCount: 0, radioScore: 0, multiCount: 0, multiScore: 0, judgeCount: 0, judgeScore: 0, saqCount: 0, saqScore: 0 }];

    // 题目列表
    let quList = [[], [], [], []];
    let quEnable = [false, false, false, false];

    let postForm = {
      // 总分数
      totalScore: 0,
      // 题库列表
      repoList: [],
      // 题目列表
      quList: [],
      // 组题方式
      joinType: 1,
      // 开放类型
      openType: 1,
      // 考试班级列表
      departIds: []

    };

    const cancel = (e) => {
      context.emit("close", false);
    };


    const columns = [{
      title: 'name',
      dataIndex: 'name',
      width: '30%',
    }, {
      title: 'age',
      dataIndex: 'age',
    }, {
      title: 'address',
      dataIndex: 'address',
    }, {
      title: 'operation',
      dataIndex: 'operation',
    }];
    const dataSource = ref([]);
    const count = computed(() => dataSource.value.length + 1);
    const editableData = reactive({});

    const edit = key => {
      editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
    };

    const save = key => {
      Object.assign(dataSource.value.filter(item => key === item.key)[0], editableData[key]);
      delete editableData[key];
    };

    const onDelete = key => {
      dataSource.value = dataSource.value.filter(item => item.key !== key);
    };
    // 添加子项
    const handleAdd = () => {
      // repoList.push({ rowId: new Date().getTime(), radioCount: 0, radioScore: 0, multiCount: 0, multiScore: 0, judgeCount: 0, judgeScore: 0, saqCount: 0, saqScore: 0 })
      const newData = {
        key: `${count.value}`,
        name: `Edward King ${count.value}`,
        age: 32,
        address: `London, Park Lane no. ${count.value}`,
      };
      dataSource.value.push(newData);
    };

    return {
      cancel,


      step,
      treeData,
      defaultProps,
      levels,
      filterText,
      treeLoading,
      dateValues,
      quDialogShow,
      quDialogType,
      excludes,
      scoreDialog,
      scoreBatch,
      // 题库
      repoList,
      // 题目列表
      quList,
      quEnable,
      postForm,

      handleAdd,
      columns,
      onDelete,
      dataSource,
      editableData,
      count,
      edit,
      save,
    };
  },
});
</script>
<style lang="less">
.editable-cell {
  position: relative;
  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    margin-top: 4px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
}
.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}
</style>
